<template>
  <el-row>
    <el-form :inline="true" :model="queryRoleForm" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="queryRoleForm.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="queryRoleForm.roleKey" placeholder="请填写权限字符"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryRoleForm.status" placeholder="请选择角色状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="createTimeRange" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间"/>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="'sys:role:list'" type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-button v-permission="'sys:role:add'" type="primary" :icon="Plus" @click="handleAddRole">新增</el-button>
  </el-row>
  <el-row>
    <el-table :data="roleTableData" style="width: 100%; margin-bottom: 20px">
      <el-table-column prop="id" label="索引" width="220"/>
      <el-table-column prop="roleName" label="角色名称" width="180"/>
      <el-table-column prop="roleKey" label="权限字符" width="180"/>
      <el-table-column prop="sort" label="显示顺序" width="180"/>
      <el-table-column prop="status" label="状态 " width="180">
        <template #default="scope">
          <span v-if="scope.row.status === 1">正常</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button v-permission="'sys:role:edit'" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button v-permission="'sys:role:delete'" size="small" type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-row>
  <el-pagination background layout="prev, pager, next" :total="page.total" v-model:page-size="page.size"
                 v-model:currentPage="page.current"/>
  <el-dialog v-model="dialogVisible">
    <mine-role-add :role-form-data="roleFormData"></mine-role-add>
  </el-dialog>

</template>
<script>
import {onMounted, ref, getCurrentInstance} from 'vue'
import {deptList} from '@/api/dept'
import * as roleApi from '@/api/role/index'
import MineRoleAdd from "@/views/role/components/mine-role-add";

const {ElMessage, ElMessageBox} = require("element-plus");
const {Plus} = require("@element-plus/icons-vue/dist/index.mjs");


export default {
  name: "index",
  components: {MineRoleAdd},
  setup() {
    const {ctx, proxy} = getCurrentInstance();

    const queryRoleForm = ref({})
    const createTimeRange = ref([])
    const roleTableData = ref([])
    const roleFormData = ref({})
    const dialogVisible = ref(false)
    const page = ref({
      total: 0,
      size: 1,
      current: 1
    })

    const onQuery = () => {
      if (createTimeRange) {
        queryRoleForm.value.startCreateTime = createTimeRange.value[0].format("yyyy-MM-dd HH:mm:ss")
        queryRoleForm.value.endCreateTime = createTimeRange.value[1].format("yyyy-MM-dd HH:mm:ss")
      }
      initRoleTable(queryRoleForm.value)
    }
    const handleAddRole = () => {
      roleFormData.value = {
        parentId: "",
        sort: 1,
        status: 1,
        sex: 2
      }
      dialogVisible.value = true
    }

    const handleEdit = (index, row) => {
      dialogVisible.value = true
      roleApi.getRoleById(row.id).then(res => {
        if (res.success) {
          roleFormData.value = res.data
        }
      })
    }
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确定要删除当前数据吗？',
          '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
        roleApi.removeById(row.id).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            initRoleTable()
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      }).catch(() => {

      })
    }
    const initRoleTable = (params) => {
      roleApi.roleList(params).then(res => {
        if (res.success) {
          roleTableData.value = res.data.records
          page.value.current = res.data.current
          page.value.size= res.data.size
          page.value.total = res.data.total
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    proxy.$bus.on('submitRoleSuccess', data => {
      dialogVisible.value = false
      initRoleTable()
    })

    onMounted(() => {
      initRoleTable(page.value)
    })
    return {
      queryRoleForm,
      createTimeRange,
      roleTableData,
      roleFormData,
      dialogVisible,
      page,
      onQuery,
      handleEdit,
      handleDelete,
      handleAddRole
    }
  }
}
</script>

<style scoped>

.el-input .el-select {
  width: 200px;
}

.el-date-editor {
  width: 200px;
}

</style>
